<template>
  <view>
    <!-- 确认用户身份 -->
    <view>
      <text>当前用户ID:</text>
      <input v-model="currentUserId" placeholder="请输入当前用户ID" />
    </view>
    <button @click="confirmUser" :disabled="userConfirmed">确认用户</button>

    <view v-if="userConfirmed">
      <view>
        <text>您要发送的用户ID:</text>
        <input v-model="targetUserId" placeholder="请输入目标用户ID" />
      </view>
      <view>
        <text>消息内容:</text>
        <textarea v-model="message" placeholder="请输入消息内容"></textarea>
      </view>
      <button @click="sendMessage">发送消息</button>

      <view>
        <text>接收到的消息:</text>
        <view v-for="(msg, index) in receivedMessages" :key="index">
          {{ msg }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentUserId: "", // 当前用户的ID
      targetUserId: "", // 目标用户的ID
      message: "", // 要发送的消息内容
      ws: null, // WebSocket 实例
      userConfirmed: false, // 是否已确认用户身份
      receivedMessages: [] // 接收到的消息列表
    };
  },
  methods: {
    // 确认用户身份并连接 WebSocket
    confirmUser() {
      if (!this.currentUserId) {
        uni.showToast({
          title: "请输入当前用户ID",
          icon: "none"
        });
        return;
      }

      this.userConfirmed = true;
      this.connectWebSocket();
    },

    // 连接 WebSocket
    connectWebSocket() {
      if (this.ws) {
        this.ws.close(); // 如果已有连接，关闭它
      }

      const wsUrl = `ws://localhost:8006/ws?userId=${this.currentUserId}`;
      this.ws = new WebSocket(wsUrl);

      this.ws.onopen = () => {
        console.log("WebSocket 连接成功");
        uni.showToast({
          title: "WebSocket 连接成功",
          icon: "success"
        });
      };

      this.ws.onmessage = (event) => {
        const message = event.data;
        console.log("接收到消息:", message);
      };

      this.ws.onclose = () => {
        console.log("WebSocket 连接已关闭");
        uni.showToast({
          title: "WebSocket 已关闭",
          icon: "none"
        });
      };

      this.ws.onerror = (err) => {
        console.error("WebSocket 出现错误:", err);
        uni.showToast({
          title: "WebSocket 错误",
          icon: "none"
        });
      };
    },

    // 发送消息
    sendMessage() {
      if (!this.message) {
        uni.showToast({
          title: "请填写消息内容",
          icon: "none"
        });
        return;
      }

      // 调用后端 REST API 发送消息
      uni.request({
        url: `http://localhost:8006/chat/send`,
        method: "GET",
        data: {
          from: this.currentUserId,
          to: this.targetUserId,
          content: this.message
        },
        success: (res) => {
          console.log("消息发送成功:", res.data);
          uni.showToast({
            title: "消息发送成功",
            icon: "success"
          });
        },
        fail: (err) => {
          console.error("消息发送失败:", err);
          uni.showToast({
            title: "消息发送失败",
            icon: "none"
          });
        }
      });
    }
  }
};
</script>

<style>
/* 页面样式 */
view {
  margin: 10px;
}
input,
textarea {
  width: 100%;
  margin: 5px 0;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  text-align: center;
  border: none;
  border-radius: 4px;
}
button:disabled {
  background-color: #ccc;
  color: #666;
}
</style>
